<template>
  <div class="box">
    <el-dialog
      destroy-on-close
      title="审批"
      :close-on-click-modal="false"
      :visible.sync="Lvisible"
      width="1200px"
      @open="onSearch"
      @close="onClose"
    >
      <span v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-form style="width: 500px" :model="form" ref="form" :rules="rules" label-width="110px">
          <el-form-item v-show="historyid != 0">
            <el-radio-group v-model="checkType" @input="checkChange">
              <el-radio :label="10" v-show="type != 'T'">同意</el-radio>
              <el-radio :label="4">不同意</el-radio>
              <!-- <el-radio :label="2" v-show="type != 'T' && type != 'Z'">转派</el-radio> -->
              <!-- <el-radio :label="1" v-show="type != 'T' && type != 'Z'">移交</el-radio> -->
            </el-radio-group>
          </el-form-item>
          <div v-if="checkType == 10 && type != 'O' && type != 'Z'">
            <el-form-item label="下一级审批">
              <!-- <el-input v-model="form.nextDis" disabled></el-input> -->
              <div>{{ form.nextDis }}</div>
            </el-form-item>
            <el-form-item v-if="type != 'N'" label="下一级审批人" prop="nextUserName">
              <el-input
                v-if="data.nextUserID != '' && data.nextUserID != null && data.nextUserID != undefined"
                v-model="form.nextUserName"
                disabled
              >
              </el-input>
              <el-input v-else v-model="form.nextUserName" readonly="true" clearable>
                <el-button
                  slot="prepend"
                  type="primary"
                  icon="el-icon-plus"
                  @click="onEmployees(data.checkOrgID, data.checkPostID)"
                ></el-button>
                <el-button
                  slot="append"
                  type="danger"
                  icon="el-icon-close"
                  @click="
                    form.nextUserName = ''
                    form.nextUserID = ''
                  "
                ></el-button>
              </el-input>
            </el-form-item>
          </div>
          <div v-else-if="checkType == 1 || checkType == 2">
            <el-form-item label="下一级审批人" prop="nextUserName">
              <el-input v-model="form.nextUserName" disabled clearable>
                <el-button
                  slot="prepend"
                  type="primary"
                  icon="el-icon-plus"
                  @click="onEmployees(data.checkOrgID_Now, data.checkPostID_Now)"
                ></el-button>
                <el-button
                  slot="append"
                  type="danger"
                  icon="el-icon-close"
                  @click="
                    form.nextUserName = ''
                    form.nextUserID = ''
                  "
                ></el-button>
              </el-input>
            </el-form-item>
          </div>
          <el-form-item prop="remark" label="说明">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="form.note"
              :autosize="{ minRows: 4, maxRows: 8 }"
              resize="none"
              show-word-limit
            />
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="onSubmit">提交审批</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" v-show="historyid != 0" height="300" stripe border style="width: 100%">
          <!-- <el-table-column :resizable="false" prop="describe" label="模块" min-width="100" /> -->
          <el-table-column :resizable="false" prop="checkdis" label="审批级次" width="180" />
          <el-table-column :resizable="false" prop="checkusername" label="审批人" width="180" />
          <el-table-column :resizable="false" prop="checkdatetime" label="审批时间" width="180" />
          <el-table-column :resizable="false" prop="checktypestr" label="状态" width="150" />
          <el-table-column :resizable="false" prop="note" label="说明" min-width="100">
            <template slot-scope="scope">
              <div v-html="scope.row.note"></div>
            </template>
          </el-table-column>
        </el-table>
      </span>
    </el-dialog>
    <Employees :visible="eVisible" :checkPostID="checkPostID" :checkOrgID="checkOrgID" @dClose="eClose"></Employees>
  </div>
</template>

<script>
import { GetCheckInfo, SubmitCheck, ExamHistoryget } from '@/api/Approval/index'
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'approveInsert',
  computed: {
    ...mapGetters(['approveInsert']),
    title() {
      return this.approveInsert.title
    },
    visible() {
      return this.approveInsert.visible
    },
    documentid() {
      return this.approveInsert.documentid
    },
    historyid() {
      return this.approveInsert.historyid
    },
    modelcode() {
      return this.approveInsert.modelcode
    }
  },
  watch: {
    approveInsert(newVal) {
      this.Lvisible = newVal.visible
    }
  },
  data() {
    return {
      form: {},
      data: {},
      rules: {
        nextUserName: [{ required: true, message: '请选择审批人', trigger: 'blur' }]
      },
      loading: true,
      checkType: 10,
      tableData: [],
      type: '',
      checkPostID: '',
      checkOrgID: '',
      eVisible: false,
      Lvisible: this.visible,
      infoDeptID: ''
    }
  },
  methods: {
    async getTableData() {
      if (this.documentid == '' || this.documentid == undefined || this.documentid == null) {
        this.$message.error('获取审批详情失败,请重试')
        return this.onClose()
      }

      await ExamHistoryget({ modelcode: this.modelcode, documentid: this.documentid })
        .then(result => {
          if (result.success) {
            var content = result.content || []
            content.forEach(item => {
              if (item.note != null) {
                item.note = item.note.replace(/\\n/g, '<br/>')
                item.note = item.note.replace(/\n/g, '<br/>')
              }
            })
            this.tableData = content
          } else {
            this.$message.error(result.message)
            this.loading = false
            this.$message.error('获取审批详情失败,请重试')
            return this.onClose()
          }
        })
        .catch(err => {
          this.$message.error('获取审批详情失败,请重试')
          this.loading = false
          return this.onClose()
        })
    },
    async onSearch() {
      this.$approveInsertReset()
      this.loading = true
      var data = {
        modelCode: this.modelcode,
        documentID: this.documentid,
        historyID: this.historyid,
        orgShowID: this.$store.getters.userInfo.orgid,
        loginUserID: this.$store.getters.userInfo.id
      }
      await GetCheckInfo(data)
        .then(result => {
          if (result.success) {
            var content = result.content
            this.type = content.type
            switch (content.type) {
              case 'E':
                this.$message.error(content.msg)
                this.Lvisible = false
                break
              case 'T':
                this.checkType = 4
                break
              default:
                break
            }
            this.loading = false
            this.form = content
            this.data = {
              nextDis: content.nextDis,
              nextUserID: content.nextUserID,
              nextUserName: content.nextUserName,
              checkOrgID_Now: content.checkOrgID_Now,
              checkPostID_Now: content.checkPostID_Now,
              checkOrgID: content.checkOrgID,
              checkOrgID: content.checkOrgID
            }
            this.infoDeptID = content.infoDeptID
          } else {
            this.$message.error(result.message)
            this.loading = false
          }
        })
        .catch(err => {})
      if (this.historyid != 0) {
        this.getTableData()
      }
    },
    onClose(type) {
      this.tableData = []
      this.form = {}
      this.data = {}
      this.loading = true
      this.checkType = 10
      this.tableData = []
      this.type = ''
      this.checkPostID = ''
      this.checkOrgID = ''
      this.eVisible = false
      this.LVisible = false
      if (type == 1) {
        this.$approveInsertClose(true)
      }
    },
    onSubmit() {
      this.$refs.form.validate(async valid => {
        if (this.form.nextUserName == '' || this.form.nextUserID == '') {
          if (this.type != 'Z' && this.checkType != 4 && this.type != 'O') {
            this.$message.error('请先选择审批人')
            return false
          }
        }
        if (valid) {
          var userInfo = this.$store.getters.userInfo
          var data = {
            userid: userInfo.id,
            userName: userInfo.username,
            orgid: this.infoDeptID,
            titleStr: this.title,
            checkType: this.checkType,
            note: this.form.note,
            historyID: this.historyid,
            modelCode: this.modelcode,
            documentID: this.documentid,
            checkLevel_Now: this.form.checkLevel_Now,
            checkLevel_Next: this.form.checkLevel_Next,
            nextDis: this.form.nextDis,
            nextUserID: this.form.nextUserID,
            nextUserName: this.form.nextUserName,
            turnHisID: this.form.turnHisID,
            isFinal: this.form.isFinal,
            isMorePep: this.form.isMorePep,
            isOtherNoCheck: this.form.isOtherNoCheck,
            isAllPepAgree: this.form.isAllPepAgree,
            finalExecPro: this.form.finalExecPro,
            examUrl: this.form.examUrl
          }
          if (data.titleStr == '' || data.titleStr == undefined || data.titleStr == null) {
            data.titleStr = this.form.Stitle
          }
          if (this.type == 'O') {
            data.nextDis = ''
            data.nextUserID = ''
            data.nextUserName = ''
          }
          if (this.type == 'N') {
            data.nextUserID = ''
            data.nextUserName = ''
          }
          if (data.checkType != 10) {
            data.nextDis = ''
          }
          if (data.checkType == 4) {
            data.nextUserID = ''
            data.nextUserName = ''
          }
          if (this.historyid != 0) {
            data.titleStr = this.form.titleStr
          }
          await SubmitCheck(data)
            .then(result => {
              if (result.success) {
                this.$message.success(result.message)
                this.onClose('1')
              } else {
                this.$message.error(result.message)
              }
            })
            .catch(err => {})
        } else {
          return false
        }
      })
    },
    checkChange(data) {
      switch (data) {
        case 10:
          this.form.nextDis = this.data.nextDis
          this.form.nextUserID = this.data.nextUserID
          this.form.nextUserName = this.data.nextUserName
          break
        case 4:
          this.form.nextUserID = ''
          this.form.nextUserName = ''
          this.form.nextDis = ''
          break
        case 1:
          this.form.nextUserID = ''
          this.form.nextUserName = ''
          this.form.nextDis = ''
          break
        case 2:
          this.form.nextUserID = ''
          this.form.nextUserName = ''
          this.form.nextDis = ''
          break
      }
    },
    onEmployees(checkOrgID, checkPostID) {
      this.checkOrgID = checkOrgID
      this.checkPostID = checkPostID
      this.eVisible = true
    },
    eClose(data) {
      if (data) {
        this.form.nextUserID = data.id
        this.form.nextUserName = data.username
      }
      this.eVisible = false
      this.checkOrgID = ''
      this.checkPostID = ''
    }
  }
}
</script>

<style scoped>
.box >>> .el-dialog__header {
  background-color: #16baaa;
  border-radius: 10px;
}

.box >>> .el-dialog__body {
  padding: 10px 20px 30px 20px;
}
</style>
